import React, { Component } from "react";

// 无论是受控组件还是非受控都是指的是表单组件
class App extends Component {
  state = {
    textValue: "abc",
  };

  handleChange(e) {
    // console.log(e.target.value);
    this.setState({
      textValue: e.target.value,
    });
  }

  handleClick() {
    console.log(this.state.textValue);
  }

  render() {
    return (
      <>
        <h2>受控组件</h2>
        {/* 如果我们给input添加了value属性，就必须要添加一个onChange的事件 */}
        {/* 只要有value属性和onChange，那么这个组件就称之为受控组件，由我们自己来控制input的内容 */}
        <input
          type="text"
          value={this.state.textValue}
          onChange={this.handleChange.bind(this)}
        />
        <button onClick={this.handleClick.bind(this)}>btn</button>
      </>
    );
  }
}

export default App;
